<template>
	<view>
		<view class="navbar">
			<view class="statusbar"></view>
			<view class="uni-flex mynav">
				<view class="left">总价(元)：<text>{{total}}</text></view>
				<view class="right"><navigator :url="mingxi" animation-type="slide-in-left">详情</navigator></view>
			</view>
		</view>
		<view class="uni-common-mt">
			<view class="uni-form-item uni-row">
                <view class="title">展开尺寸</view>
                <input class="uni-input" focus placeholder="展开尺寸(长)mm" v-model="chicun_chang"/>
            </view>
			<view class="uni-form-item uni-row">
			    <view class="title">展开尺寸</view>
			    <input class="uni-input" focus placeholder="展开尺寸(宽)mm" v-model="chicun_kuan"/>
			</view>
			<view class="uni-form-item uni-row">
			    <view class="title">印刷数量</view>
			    <input class="uni-input" focus placeholder="印刷数量(张)" v-model="count"/>
			</view>
			<view class="uni-form-item uni-row">
			    <view class="title">纸张克重</view>
			    <picker @change="bindPickerChange" :value="kezhong_index" :range="kezhong" range-key="name">
			        <view class="uni-input">{{kezhong[kezhong_index].name}}</view>
			    </picker>
			</view>
			<view class="uni-form-item uni-row">
			    <view class="title">印刷费用</view>
			    <picker @change="bindPickerChange_yinshua" :value="yinshua_index" :range="yinshua" range-key="name">
			        <view class="uni-input">{{yinshua[yinshua_index].name}}</view>
			    </picker>
			</view>
			<view class="uni-form-item uni-row">
			    <view class="title">刀版费用</view>
			    <picker @change="bindPickerChange_daoban" :value="daoban_index" :range="daoban" range-key="name">
			        <view class="uni-input">{{daoban[daoban_index].name}}</view>
			    </picker>
			</view>
			<view class="uni-form-item uni-row">
			    <view class="title">覆膜费用</view>
			    <view>
					<radio-group @change="_fumo">
						<label class="radio"><radio value="ya" checked="true" color="#09BB07"/>哑膜</label>
						<label class="radio"><radio value="liang" color="#09BB07"/>亮膜</label>
						<label class="radio"><radio value="wu" color="#09BB07"/>不覆膜</label>
					</radio-group>
				</view>
			</view>
			<view class="uni-form-item uni-row">
			    <view class="title">粘盒费用</view>
			    <input class="uni-input" v-model="zhanhe_num"/>
				<view class="title">个</view>
				<input class="uni-input" v-model="zhanhe_price"/>
				<view class="title">元</view>
			</view>
		</view>
		<uni-fab :pattern="pattern" :content="content" @trigger="trigger"></uni-fab>
	</view>
</template>

<script>
	import uniFab from "../../components/uni-fab/uni-fab.vue"
	export default {
		components:{
			uniFab
		},
		data() {
			return {
				chicun_chang:"",//展开尺寸（长）
				chicun_kuan:"",//展开尺寸（宽）
				count:"",//纸张数量
				zhanhe_num:0,//粘盒数量
				zhanhe_price:0,//粘盒价格
				kezhong:[
					{name:200,price:1},
					{name:250,price:1.5},
					{name:300,price:2},
					{name:350,price:2.5},
				],//纸张类型和价格
				kezhong_index:0,
				yinshua:[
					{name:'对开',price:1000,zhangfu:100},
					{name:'四开',price:2000,zhangfu:150},
					{name:'八开',price:3000,zhangfu:200},
				],//纸张类型和价格
				yinshua_index:0,
				daoban:[
					{name:'对开',price:100},
					{name:'四开',price:150},
					{name:'八开',price:200},
				],//刀版类型和价格
				daoban_index:0,
				fumo:{ya:3,liang:2,wu:0},//覆膜价格
				fumoprice:0 ,//覆膜的当前价格
				mingxi:"",//计价详情,
				content:[
					{
						iconPath: '/static/common/tongbu.png',
						selectedIconPath: '/static/common/tongbu_hover.png',
						text:"同步",
						active:false,
					},
					{
						iconPath: '/static/common/exit.png',
						selectedIconPath: '/static/common/exit_hover.png',
						text:"退出",
						active:false,
						},
				],
				pattern:{
					
				}
			}
		},
		onLoad() {
			this.helper.checkLogin();
			this.getData();
		},
		watch:{
			fumoprice:function(value){
				console.log(value);
			}
		},
		computed:{
			total:function(){//自动计价
				var total = 500;
				var mianji= 1*this.chicun_chang*this.chicun_kuan/1000000;
				//纸张费用
				var zhizhangtotal = mianji * this.count * this.kezhong[this.kezhong_index].price;
				//印刷费用
				var zf = this.count*1-3000;
				zf = (zf<=0)?0:zf;
				var zftotal = Math.ceil(zf/1000)*this.yinshua[this.yinshua_index].zhangfu;
				var yinshuatotal =(this.yinshua[this.yinshua_index].price*1) + zftotal;
				//刀版费用
				var daobantotal = this.daoban[this.daoban_index].price*1;
				//覆膜费用
				var fumototal = mianji * this.count * this.fumoprice;
				//粘盒的费用
				var zhanhetotal=this.zhanhe_num*1*this.zhanhe_price;
				console.log(yinshuatotal);
				total = zhizhangtotal+daobantotal+fumototal+zhanhetotal+yinshuatotal;
				if(mianji<=0 || this.count<=0){
					total=0;
				}
				this.mingxi = "../mingxi/mingxi?zz="+zhizhangtotal+"&ys="+yinshuatotal+"&db="+daobantotal+"&fm="+fumototal+"&zh="+zhanhetotal;
				return total.toFixed(4);
			}
		},
		methods: {
			bindPickerChange:function(e){
				this.kezhong_index = e.target.value;
			},
			bindPickerChange_daoban:function(e){
				this.daoban_index = e.target.value;
			},
			bindPickerChange_yinshua:function(e){
				this.yinshua_index = e.target.value;
			},
			_fumo:function(e){
				switch(e.detail.value){
					case "ya":
						this.fumoprice=this.fumo.ya;
						break;
					case "liang":
						this.fumoprice=this.fumo.liang;
						break;
					default:
						this.fumoprice=this.fumo.wu;
						break;
				}
			},
			trigger:function(e){
				// this.content.forEach(function(item){
				// 	item.active = false;
				// }); 
				// e.item.active=true;
				this.content[e.index].active = !e.item.active;
				switch(e.index){
					case 0:
						this.getData();
						break;
					case 1:
						uni.clearStorageSync('userinfo');
						uni.reLaunch({
							url:"../login/login"
						})
						break;
				}
			},
			getData:function(){
				//获取基础参数
				uni.showLoading({
					title:"数据加载中",
					mask:true
				})
				let userinfo = uni.getStorageSync("userinfo");
				let token = userinfo.token;
				let timestamp = this.helper.now();
				let sign = this.helper.setSign(['token='+token,'timestamp='+timestamp]);
				this.helper.req({
					api:"getconfig",
					timestamp:timestamp,
					data:{token:token},
					header:{sign:sign}
				}).then(res=>{
					console.log(res);
					this.kezhong = res.data.data.kezhong;
					this.yinshua = res.data.data.yinshua;
					this.daoban = res.data.data.daoban;
					this.fumo = res.data.data.fumo;
					this.fumoprice = this.fumo.ya;
					uni.hideLoading();
				})
			}
		},
	}
</script>

<style lang="scss">
  .navbar{
	  background-color: #0066FF;
	  color:#FFFFFF;
	  /* #ifndef MP-WEIXIN */
	  .statusbar{height: var(--status-bar-height);}
	  /* #endif */
	  .mynav{
	  	padding:0 15px;
	  	padding:0 15px;
		height: 44px;
		
	  	.left{width: 75%;text{font-size: 36upx;};line-height: 44px;}
	  	.right{
	  		width: 25%;
	  		text-align: right;
			line-height: 44px;
	  	}
	  }
  }
  .uni-common-mt{
	  .uni-form-item{
		  border-bottom: 1px solid #F5F5F5;
		  justify-content: space-between;
		  .uni-input{text-align: right;}
		  .radio{
			  padding-right: 20upx;
			  padding-top:20upx;
		  }
	  }
	 
  }
  
</style>
